<template>
  <div class="content-bottom">
    <div class="content-bottom_left">
      <div class="keyboard-remark">
        <el-popover placement="bottom" trigger="click" width="260">
          <template #reference>
            <el-button size="mini" plain>
              <i class="iconfont icon-jianpan"></i>
            </el-button>
          </template>
          <div>
            <table class="keyboard-remark-table">
              <thead>
              <tr>
                <th>快捷键</th>
                <th>描述</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in shortcutOption" :key="item.value">
                <td>{{ item.value }}</td>
                <td>{{ item.name }}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-popover>
      </div>
      <div class="scale-input-wp">
        <input type="number" class="scale-input" min="0" v-model="inputScale" @blur="handleInputScaleChange"
               @keydown.enter="$event.target.blur()">
        <span class="percent">%</span>
        <el-popover v-model:visible="popoverVisible" placement="bottom" trigger="click" popper-class="scale-input-wp_popover">
          <template #reference>
            <i class="iconfont icon-xiala open-icon" @click="popoverVisible != popoverVisible"></i>
          </template>
          <div v-for="item in scaleOption" class="scale-input-wp_select" @click="handleSelectScaleChange(item.value)">
            {{ item.label }}
          </div>
        </el-popover>
      </div>
      <div class="scaleSlider">
        <el-slider v-model="scaleNumber" :step="1" :max="200" :min="0" @change="handleScaleChange"/>
      </div>
    </div>
    <div class="">
      <el-button @click="handleSelectMapShow" size="mini" plain>
        <i class="iconfont icon-daxiao"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import { shortcutOption } from "../../../../utils/dict";
import { useStore } from "vuex";

export default defineComponent({
  name: "footer-toolbar",
  setup() {
    const store = useStore();
    const scaleNumber = ref(20);
    const inputScale = ref(20);
    const scale = computed(() => store.state.design.canvas.scale);
    const offsetX = computed(() => store.getters["design/getPanelOffsetX"]);
    const offsetY = computed(() => store.getters["design/getPanelOffsetY"]);
    const popoverVisible = ref(false);
    watch(() => scale.value, s => {
      const newV = parseInt((s * 100).toFixed(2));
      scaleNumber.value = newV;
      inputScale.value = newV;
    });
    const handleScaleChange = (newV) => {
      store.dispatch("design/setCanvasScale", { scale: newV, offsetX: offsetX.value, offsetY: offsetY.value });
    };
    const handleInputScaleChange = () => {
      store.dispatch("design/setCanvasScale", {
        scale: inputScale.value,
        offsetX: offsetX.value,
        offsetY: offsetY.value
      });
    };
    const handleSelectScaleChange = (newV) => {
      if (newV === -1) {
        store.dispatch("design/autoCanvasScale", { offsetX: offsetX.value, offsetY: offsetY.value });
      } else {
        store.dispatch("design/setCanvasScale", { scale: newV, offsetX: offsetX.value, offsetY: offsetY.value });
      }
      popoverVisible.value = false
    };
    const scaleOption = ref([{
      label: "50%",
      value: 50,
    }, {
      label: "100%",
      value: 100,
    }, {
      label: "200%",
      value: 200,
    }, {
      label: "自适应",
      value: -1,
    }]);
    const handleSelectMapShow = () => {
      store.commit("design/SET_SelectedMap");
    };
    onMounted(() => {
      const newV = parseInt((scale.value * 100).toFixed(2));
      scaleNumber.value = newV;
      inputScale.value = newV;
    });
    return {
      shortcutOption,
      scaleNumber,
      inputScale,
      scaleOption,
      popoverVisible,
      handleScaleChange,
      handleInputScaleChange,
      handleSelectScaleChange,
      handleSelectMapShow,
      offsetX,
      offsetY
    };
  }
});
</script>

<style lang="less" scoped>
@import "./../../../../style/theme/index.less";

.content-bottom {
  .flex_between();
  background-color: @background-color-2;
  user-select: none;

  .content-bottom_left {
    display: flex;
    align-items: center;
    flex: 1;

    .keyboard-remark {
      flex: 0 0 40px;

      .icon-jianpan {
        font-size: 18px;
        vertical-align: middle;
      }
    }

    .scale-input-wp {
      position: relative;
      height: 24px;
      line-height: 22px;
      overflow: hidden;
      cursor: pointer;
      background: #262c33;
      border: 1px solid #0b0c0d;
      display: inline-block;
      margin-right: 12px;

      input {
        display: inline-block;
        padding-left: 5px;
        font-size: 12px;
        color: @color-7;
        text-align: right;
        caret-color: @color-7;
        position: relative;
        width: 27px;
        height: 20px;
        overflow: hidden;
        background: #262c33;
        border: 0;
      }

      .percent {
        margin-left: 1px;
        color: @color-7;
      }

      .open-icon {
        color: @color-7;
        font-size: 12px;
        padding: 6px 8px;
        box-sizing: border-box;
      }
    }

    .scaleSlider {
      width: 200px;
    }
  }
}

.keyboard-remark-table {
  font-size: 11px;
  color: @color-2;
  border-width: 1px;
  border-color: @border-color-2;
  border-collapse: collapse;
  margin-top: 10px;
  margin-bottom: 10px;

  th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: @border-color-3;
    background-color: @background-color-1;
    color: @color-8;
  }

  td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: @border-color-3;
    background-color: @background-color-7;
    color: @color-8;
  }
}

.scale-input-wp_select {
  cursor: pointer;
  position: relative;
  padding: 0 12px;
  transition: background-color .3s cubic-bezier(0.4, 0, 0.2, 1), color .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.82);
  opacity: 1;
  height: 34px;
  line-height: 34px;

  &:hover {
    background-color: var(--el-border-color-extra-light);
  }
}
</style>
<style>

</style>